<!--
 @Author:leiy0
 @Date:2021-01-09 15:29:16
 @LastModifiedBy:leiy0
 @Last Modified time:2021-01-09 15:29:16
-->

 @Last Modified time:2021-01-09 15:02:44
-->

 @Last Modified time:2021-01-09 15:01:39
-->

 @Last Modified time:2021-01-09 14:59:40
-->

 @Last Modified time:2021-01-09 14:55:41
-->

 @Last Modified time:2021-01-09 14:53:31
-->

 @Last Modified time:2021-01-09 14:52:37
-->

 @Last Modified time:2021-01-09 14:51:54
-->

 @Last Modified time:2021-01-09 14:50:39
-->

 @Last Modified time:2021-01-09 14:49:57
-->

 @Last Modified time:2021-01-09 14:48:36
-->

 @Last Modified time:2021-01-09 14:48:16
-->

 @Last Modified time:2021-01-09 14:47:59
-->

 @Last Modified time:2021-01-09 14:45:38
-->

 @Last Modified time:2021-01-09 14:44:52
-->

 @Last Modified time:2021-01-09 14:43:11
-->

 @Last Modified time:2021-01-09 14:40:56
-->

 @Last Modified time:2021-01-09 14:40:36
-->

 @Last Modified time:2021-01-09 14:35:57
-->

 @Last Modified time:2021-01-09 14:35:37
-->

 @Last Modified time:2021-01-09 14:12:54
-->

 @Last Modified time:2021-01-09 13:59:34
-->

 @Last Modified time:2021-01-09 13:56:02
-->

 @Last Modified time:2021-01-09 13:53:08
-->

 @Last Modified time:2021-01-09 13:52:00
-->

 @Last Modified time:2021-01-09 13:48:14
-->

 @Last Modified time:2021-01-09 13:02:11
-->

 @Last Modified time:2021-01-09 12:59:32
-->

 @Last Modified time:2021-01-09 12:55:58
-->

 @Last Modified time:2021-01-09 12:54:11
-->

 @Last Modified time:2021-01-09 12:47:14
-->

 @Last Modified time:2021-01-09 12:45:53
-->

 @Last Modified time:2021-01-09 12:45:32
-->

 @Last Modified time:2021-01-09 12:42:09
-->

 @Last Modified time:2021-01-09 12:41:19
-->

 @Last Modified time:2021-01-09 12:40:34
-->

 @Last Modified time:2021-01-09 12:00:28
-->

 @Last Modified time:2021-01-09 12:00:11
-->

 @Last Modified time:2021-01-09 11:59:09
-->

 @Last Modified time:2021-01-09 11:47:43
-->

 @Last Modified time:2021-01-09 11:27:55
-->

 @Last Modified time:2021-01-09 11:27:04
-->

 @Last Modified time:2021-01-09 11:21:58
-->

 @Last Modified time:2021-01-09 10:36:02
-->

<template>
  <div id="article">
    <div class>
      <el-button
        size="small"
        type="primary"
        icon="el-icon-circle-plus"
        @click="toAdd"
        >新增</el-button
      >
      <div class="widthDiv marginLeft">
        <el-input
          size="small"
          clearable
          v-model="pageParam.title"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="widthDiv">
        <el-select
          size="small"
          clearable
          v-model="pageParam.categoryId"
          placeholder="请选择分类"
        >
          <el-option
            v-for="item in categoryData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <el-button
        size="small"
        type="primary"
        icon="el-icon-search"
        @click="toSearch"
        >搜索</el-button
      >
      <el-button size="small" type="text" icon="el-icon-tickets" @click="open"
        >介绍</el-button
      >
    </div>
    <el-table size="mini" :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="发布时间">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <!-- <span style="margin-left: 10px">{{ scope.row.publishTime }}</span> -->
          <span style="margin-left: 10px">{{
            moment(scope.row.publishTime).format("YYYY-MM-DD HH:mm:ss")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="新闻标题" width="400">
        <template slot-scope="scope">
          <el-tag type="info" size="medium">{{ scope.row.title }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column prop="category.name" label="新闻分类"></el-table-column>
      <el-table-column prop="readTimes" label="阅读次数"></el-table-column>
      <!-- <div class="block">
        <span class="demonstration"></span>
        <el-rate v-model="value2" :colors="colors"> </el-rate> -->
      <!-- <el-table-column prop="demonstration" label="评分">
          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-edit"
              type="primary"
              plain
              @click="toEval(scope.row)"
            ></el-button>
          </template>
        </el-table-column> -->
      <!-- </div> -->

      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            plain
            @click="handleEdit(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="primary"
            plain
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageParam.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageParam.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog
      width="70%"
      :title="title"
      :visible.sync="visible"
      :before-close="beforeClose"
    >
      <el-form :model="form" ref="ruleForm" :rules="rules">
        <el-form-item
          prop="title"
          label="新闻标题"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="categoryId"
          label="新闻分类"
          :label-width="formLabelWidth"
        >
          <el-select
            size="small"
            clearable
            v-model="form.categoryId"
            placeholder="请选择分类"
          >
            <el-option
              v-for="item in categoryData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="readTimes"
          label="阅读次数"
          :label-width="formLabelWidth"
        >
          <!-- <tinymce v-model="form.content"></tinymce>
          <h1>{{ msg }}</h1>
          <h2>阅读次数： {{ counter }}</h2>
          <el-button
            @click="
              currentArticle = item;
              currentArticle = item;
              dialogVisible = true;
              toPost;
            "
            >+</el-button
          > -->
        </el-form-item>

        <el-form-item prop="content" label="资讯" :label-width="formLabelWidth">
          <tinymce v-model="form.content"></tinymce>
        </el-form-item>
        <el-form-item prop="no" label="序号" :label-width="formLabelWidth">
          <el-input v-model.number="form.no" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="toCancel">取 消</el-button>
        <el-button type="primary" @click="toSave('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from "../../utils/request";
// 引入tinymce组件
import Tinymce from "../../components/Tinymce/index";
let moment = require("moment");
export default {
  // 注册组件
  components: {
    // 组件名(标签名):组件对象
    tinymce: Tinymce,
  },
  // inject: ["reload"],

  data() {
    return {
      // msg: "Welcome to Your Vue.js App",
      // counter: 0,
      value2: null,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],

      form: {},
      title: "录入资讯信息",
      visible: false,
      categoryData: [],
      total: 0,
      tableData: [],
      // 分页查询的参数
      pageParam: {
        page: 1,
        pageSize: 10,
        title: "",
        categoryId: "",
      },
      // 模态框表单控件标题的宽度
      formLabelWidth: "100px",
      // 表单校验规则
      rules: {
        title: [{ required: true, message: "请输入资讯标题", trigger: "blur" }],
        categoryId: [
          { required: true, message: "请选择资讯分类", trigger: "change" },
        ],
        content: [
          { required: true, message: "请输入资讯内容", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  methods: {
    incr: function () {
      console.log("添加");
      this.counter++;
    },

    open() {
      this.$alert("在这里你可以了解关于疫情的最新新闻", "简介", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$message({
            type: "info",
            message: `action: ${action}`,
          });
        },
      });
    },

    moment,
    // 点击确定按钮
    toSave(formName) {
      this.$refs[formName].validate((valid) => {
        // 校验通过
        if (valid) {
          // console.log(this.form, "=====");
          axios.post("/article/saveOrUpdate", this.form).then((res) => {
            if (res.status == 200) {
              //保存成功，关闭模态框，刷新数据
              this.$notify({
                title: "成功",
                message: "保存成功",
                type: "success",
              });
              this.toCancel();
              this.pageQuery();
            } else {
              this.$notify.error({
                title: "失败",
                message: res.statusText,
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    toEval() {
      this.pageQuery();
    },

    // 关闭模态框
    toCancel() {
      this.$refs["ruleForm"].resetFields();
      this.visible = false;
    },
    // 模态框关闭之前
    beforeClose(done) {
      this.$refs["ruleForm"].resetFields();
      done();
    },
    // 添加
    toAdd() {
      this.form = {};
      this.visible = true;
      this.title = "录入资讯信息";
    },
    // 搜索
    toSearch() {
      this.pageParam.page = 1;
      this.pageQuery();
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageParam.pageSize = val;
      this.pageQuery();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageParam.page = val;
      this.pageQuery();
    },
    handleEdit(row) {
      this.title = "编辑信息";
      this.form = { ...row };
      this.visible = true;
    },
    handleDelete(id) {
      // id 就是要删除的分类的对象的id
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // await等待后面异步函数运行完毕，拿到响应的数据，然后返回
          let res;
          if (id) {
            res = await axios.get("/article/deleteById", {
              params: { id },
            });
          } else {
            res = await axios.get("/article/saveOrUpdate", {
              ids: this.multipleSelection.toString(),
            });
          }
          this.$notify({
            title: res.status == 200 ? "成功" : "失败",
            message: res.statusText,
            type: res.status == 200 ? "success" : "error",
          });
          // this.reload();
          this.pageQuery();
        })
        .catch((err) => {
          console.log(err, "----");
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 分页查找
    async pageQuery() {
      let res = await axios.get("/article/pageQuery", {
        params: this.pageParam,
      });
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
    // 查找分类
    async findAllCategory() {
      let res = await axios.get("/category/findAll");
      this.categoryData = res.data;
    },
  },
  created() {
    this.pageQuery();
    this.findAllCategory();
  },
};
</script>
<style scoped>
.widthDiv {
  width: 200px;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
}
.marginLeft {
  margin-left: 10px;
}
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
</style>